import { IconClose } from "../icons/icon_close.slint";

export component Tag {
    in property <string> text: "tag";
    in property <brush> background: white;
    in property <brush> color: black;
    in property <length> font_size: 14px;
    in property <brush> close_color: gray;

    width: 100%;
    height: font_size + 16px;

    callback close <=> close.clicked;

    Rectangle {
        background: background;

        Text {x: 8px;y: 8px;text: text;color: color;font-size: font_size;}

        close:= IconClose {
            x: root.width - self.width - 8px;
            y: 8px;
            width: font_size;
            colorize: close_color;
            mouse_cursor: pointer;
        }
    }
}